<template>
  <div>
    <el-dialog title="分配权限" :visible="showDialog" @close="cloneFn">
      <el-tree
        ref="tree"
        node-key="id"
        :data="premList"
        :props="{ label:'title'}"
        show-checkbox
        check-strictly
      />

      <template v-slot:footer>
        <el-row>
          <el-button size="small" type="primary" @click="submit">确定</el-button>
          <el-button size="small" @click="cloneFn">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { getPermission } from '@/api/model/permission'
import { listTotree } from '@/utils'
import { getAssignRole, editRole } from '@/api/model/role'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false

    }
  },
  data() {
    return {
      premList: [],
      roulesid: [],
      rouleId: ''
    }
  },
  async created() {
    const res = await getPermission()
    // console.log(27, res)

    this.premList = listTotree(res.data, '0')
  },
  methods: {

    // 根据角色获取数据
    async getAssignRole(id) {
      this.rouleId = id
      const res = await getAssignRole(id)
      console.log(res)
      this.roulesid = res.data.permissions
      console.log(51, this.roulesid)
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.roulesid)
      })
    },
    // 提交
    async submit() {
      this.roulesid = this.$refs.tree.getCheckedNodes()
      // console.log(49, this.roulesid)
      console.log(this.rouleId)
      // 编辑权限
      const res = await editRole({
        id: this.rouleId,
        permissions: this.roulesid
      })
      console.log(res)
      // 关闭弹窗
      this.cloneFn()
    },
    cloneFn() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>
<style>

</style>
